<template>
    <div class="box">
        <swipers :swiper="swiper"></swipers>


        <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="(v, i) in navlist" :key="i">
                <van-image :src="v.image_src" />
            </van-grid-item>
        </van-grid>
        <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="(v, i) in navlist" :key="i">
                <van-image :src="v.image_src" />
            </van-grid-item>
        </van-grid>

        <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="(v, i) in list" :key="i" :style="i % 2 == 0 ? { height: '20rem' } : { height: '30rem' }">
                <van-image
                    :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg'" />
                {{ v.goods_name }}
            </van-grid-item>
        </van-grid>





    </div>
</template>

<script setup>
import { ref } from "vue";
import swipers from '@/components/swipers.vue';
import { swiperdataApi, catitemsApi, searchApi } from "@/api/api";

let swiper = ref([]);
const getswiperdataApi = () => {
    swiperdataApi().then((res) => {
        swiper.value = res.data.message
    })
}
getswiperdataApi();

let navlist = ref([]);
const getcatitemsApi = () => {
    catitemsApi().then((res) => {
        navlist.value = res.data.message;
    })
}
getcatitemsApi();

let list = ref([]);
const getsearchApi = () => {
    searchApi().then((res) => {
        list.value = res.data.message.goods;
    })
}
getsearchApi();


</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}
</style>